{% extends "base.html" %}

{% block title %}个人资料设置{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header" style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: white;">
                    <h4 class="mb-0">个人资料设置</h4>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <!-- 头像预览和上传 -->
                        <div class="text-center mb-4">
                            <img src="{% if current_user.avatar_data is not none %}{{ url_for('get_avatar', user_id=current_user.id) }}{% else %}{{ url_for('static', filename=current_user.avatar) }}{% endif %}" 
                                 class="rounded-circle mb-3 shadow" 
                                 alt="头像" 
                                 id="avatar-preview"
                                 style="width: 150px; height: 150px; object-fit: cover;">
                            <div class="mt-3">
                                <label class="btn btn-outline-primary">
                                    <i class="bi bi-camera-fill me-1"></i>更换头像
                                    <input type="file" name="avatar" class="d-none" accept="image/png,image/jpeg,image/gif,image/webp,image/bmp" onchange="previewImage(this);">
                                </label>
                                <div class="form-text text-muted mt-2">
                                    <i class="bi bi-info-circle me-1"></i>支持 PNG、JPG、GIF、WebP、BMP 格式
                                </div>
                            </div>
                        </div>

                        <!-- 基本信息 -->
                        <div class="row g-3">
                            <!-- 昵称设置 -->
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="username" name="username" 
                                           value="{{ current_user.username }}" required>
                                    <label for="username">昵称</label>
                                </div>
                            </div>

                            <!-- 性别选择 -->
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <select class="form-select" id="gender" name="gender">
                                        <option value="保密" {% if current_user.gender == '保密' %}selected{% endif %}>保密</option>
                                        <option value="男" {% if current_user.gender == '男' %}selected{% endif %}>男</option>
                                        <option value="女" {% if current_user.gender == '女' %}selected{% endif %}>女</option>
                                    </select>
                                    <label for="gender">性别</label>
                                </div>
                            </div>

                            <!-- 年龄输入 -->
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="number" class="form-control" id="age" name="age" 
                                           value="{{ current_user.age or 18 }}" min="1" max="120">
                                    <label for="age">年龄</label>
                                </div>
                            </div>

                            <!-- 城市输入 -->
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="city" name="city" 
                                           value="{{ current_user.city or '' }}" 
                                           placeholder="请选择城市"
                                           list="cityList">
                                    <datalist id="cityList">
                                        <option value="北京市">
                                        <option value="上海市">
                                        <option value="广州市">
                                        <option value="深圳市">
                                        <option value="天津市">
                                        <option value="重庆市">
                                        <option value="成都市">
                                        <option value="杭州市">
                                        <option value="武汉市">
                                        <option value="南京市">
                                        <!-- 更多城市可以继续添加 -->
                                    </datalist>
                                    <label for="city">所在城市</label>
                                    <div class="form-text text-muted">
                                        <i class="bi bi-geo-alt me-1"></i>请从列表中选择或输入城市名
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 个人简介 -->
                        <div class="form-floating mb-3">
                            <textarea class="form-control" id="bio" name="bio" style="height: 120px" 
                                      placeholder="写点什么来介绍自己吧...">{{ current_user.bio or '这个人很懒，什么也没留下...' }}</textarea>
                            <label for="bio">个人简介</label>
                            <div class="form-text text-muted">
                                <i class="bi bi-info-circle me-1"></i>写点什么来介绍自己吧，比如兴趣爱好、生活态度等
                            </div>
                        </div>

                        <!-- 邮箱显示（不可修改） -->
                        <div class="form-floating mb-4">
                            <input type="email" class="form-control bg-light" value="{{ current_user.email }}" disabled>
                            <label>邮箱地址</label>
                            <div class="form-text text-muted">
                                <i class="bi bi-lock me-1"></i>邮箱地址不可修改
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-check-lg me-1"></i>保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function previewImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            // 更新预览图片
            document.getElementById('avatar-preview').src = e.target.result;
            
            // 自动提交表单
            input.closest('form').submit();
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<style>
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    border-color: transparent;
}

.form-control:focus, .form-select:focus {
    border-color: #43cea2;
    box-shadow: 0 0 0 0.2rem rgba(67, 206, 162, 0.25);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #43cea2;
}

.btn-primary {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    border: none;
    transition: transform 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #3ab890 0%, #14508c 100%);
}

.card {
    border: none;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

#avatar-preview {
    border: 4px solid white;
    transition: transform 0.3s;
}

#avatar-preview:hover {
    transform: scale(1.05);
}
</style>
{% endblock %} 